<template>
  <div id="pic">
    <h1 id="title">金牌医生</h1>
    <swiper :options="swiperOption">
      <swiper-slide>
        <img
          width="1100px"
          height="700px"
          src="/index-doctor/doctor1.jpg"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          width="1100px"
          height="700px"
          src="/index-doctor/doctor2.png"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          width="1100px"
          height="700px"
          src="/index-doctor/doctor3.jpg"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          width="1100px"
          height="700px"
          src="/index-doctor/doctor4.jpg"
          alt=""
        />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselData: [],
      // 轮播图配置项
      swiperOption: {
        // 特效 effect
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
//轮播图
#pic {
  margin: 0 auto;
  width: 1440px;
  font-size: 300px;
  color: brown;
}
#title {
  font-size: 25%;
  margin: 100px 0;
}
</style>
<style lang="scss">
.swiper-container {
  .swiper-slide {
    width: 80%;
    text-align: center;
  }
  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
  }
  .swiper-pagination-bullet-active {
    background-color: #ad6e3f;
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 55px;
    height: 55px;
    background: url(../assets/left.png) no-repeat;
    background-size: 60px 60px;
    color: transparent;
    margin: 0 20px;
    top: 41%;
  }
  .swiper-button-next {
    transform: rotateY(180deg);
  }
}
</style>
